Skip to main content

谈谈 ErrorBoundaries

是什么​

错误边界是 React 组件，它可以 在子组件树的任何位置捕获 js 错误，并记录这些错误，显示一个备用 UI ，而不是使整个组件树崩溃。

预览地址

错误边界 无法 捕获如下错误​

  1. 事件处理
  2. 异步代码 （例如 setTimeout 或 requestAnimationFrame 回调函数）
  3. 服务端渲染 ssr
  4. 错误边界自身抛出来的错误 （而不是其子组件）

为何不使用 try/catch?​

try / catch 非常棒，但其仅能在命令式代码下可用：

try {
  showButton();
} catch (error) {
  // ...
}

然而，React 组件是声明式的并且具体指出 声明 什么需要被渲染：

<Button />